<template>
	<view class="content" v-if="cartData.list && cartData.list.length > 0">
		<view class="content-top">
			<view class="cell-group margin-cell-group">
				<view class="cell-item">
					<view class="cell-item-hd">
						<image class="cell-hd-icon" src="/static/image/homepage.png" style="width: 32upx;height: 32upx;"></image>
					</view>
					<view class="cell-item-bd">
						<text class="cell-bd-text">{{ shopName }}</text>
					</view>
					<view class="cell-item-ft">
						<text class="cell-bd-text" @click="editBtn" v-if="!editStatus">编辑</text>
						<text class="cell-bd-text" @click="editNoBtn" v-else>完成</text>
						<!-- <image class='cell-ft-next icon' src='/static/image/right.png'></image> -->
					</view>
				</view>
			</view>
			<view class="img-list cart-list">
				<checkbox-group class="cart-checkbox" v-for="(item, index) in cartData.list" :key="index" :val="item.id" @change="checkboxChange(item.id)">
					<view class="">
						<label class="uni-list-cell uni-list-cell-pd">
							<view class="cart-checkbox-c">
								<checkbox color="#FF7159" :checked="item.is_select" :value="item.id" :disabled="item.stockNo" v-if="item.stockNo" class="checkboxNo" />
								<checkbox color="#FF7159" :checked="item.is_select" :value="item.id" v-else/>
							</view>
						</label>
						<view class="img-list-item">
							<image class="img-list-item-l little-img have-none" :src="item.products.image_path" mode="aspectFill"></image>
							<view class="img-list-item-r little-right">
								<view class="little-right-t">
									<view class="goods-name list-goods-name" @click="goodsDetail(item.products.goods_id)">
										{{ item.products.name }}
									</view>
									<view class="goods-price red-price">
										￥{{ item.products.price }}
									</view>
								</view>
								<view class="romotion-tip" v-if="item.products.promotion_list">
									<view class="romotion-tip-item" v-for="(v, k) in item.products.promotion_list" :key="k" :class="v.type !== 2 ? 'bg-gray' : ''">
										{{v.name}}
									</view>
								</view>
								<view class="goods-item-c">
									<view class="goods-buy">
										<!-- 商品规格 -->
										<view class="goods-salesvolume" v-if="item.products.spes_desc">
											{{ item.products.spes_desc }}
										</view>
										<view class="goods-salesvolume" v-else></view>
										<view class="goods-numbox">
											<text v-if="item.stockNo && !editStatus" class="stockError">库存不足</text>
											<text v-else-if="item.stockTension && !editStatus" class="stockError stockTension">库存紧张</text>
											<uni-number-box v-on:change="bindChange($event, item)" :min="1" :max="item.maxStock" :value="item.nums" v-if="!editStatus"></uni-number-box>
											<view v-else="" @click="del(index,item.id)" class='click-del'>
												<image class="icon" src="/static/image/delete.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>
		<view class="cart-bottom">
			<checkbox-group class="cart-checkbox" @change="checkboxAllButton">
				<label class="uni-list-cell uni-list-cell-pd">
					<view class="cart-checkbox-c">
						<checkbox :checked="checkboxAll" color="#FF7159" /> 全选
					</view>
				</label>
				<view class="cart-bottom-right">
					<view class="cart-bottom-right-t" v-if="!editStatus">
						合计：
						<view class="goods-price red-price">￥{{ cartData.amount }}</view>
					</view>
					<button class="btn btn-square btn-b" v-if="!editStatus" @click="settlement" hover-class="btn-hover2">去结算</button>
					<view v-else>
						<button class="btn btn-square btn-b" @click="delList">删除</button>
						<!-- <button class="btn btn-square"  @click="collection">收藏</button> -->
					</view>
				</view>
			</checkbox-group>
		</view>
	</view>
	<!-- 购物车为空 -->
	<!-- <view class='cart-none' v-else-if="cartData.list && cartData.list.length < 1 && isLoad == true">
		<image class="cart-none-img" src="/static/image/car.png" mode=""></image>
		<view class='cart-none-t'>购物车快饿瘪了 T.T</view>
		<view class='cart-none-m'>快给我挑点宝贝吧</view>
		<navigator class="cart-none-b" url='../../index/index' hover-class="btn-hover" open-type="switchTab">去逛逛</navigator>
	</view> -->
	<view class='cart-none' v-else>
		<image class="cart-none-img" src="/static/image/car.png" mode=""></image>
		<view class='cart-none-t'>购物车快饿瘪了 T.T</view>
		<view class='cart-none-m'>快给我挑点宝贝吧</view>
		<navigator class="cart-none-b" url='../../index/index' hover-class="btn-hover" open-type="switchTab">去逛逛</navigator>
	</view>
</template>

<script>
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
import { goods } from '@/config/mixins.js'
export default {
  mixins: [goods],
  data() {
    return {
      startX: 0, //开始坐标
      startY: 0,
      cartData: {}, //购物车数据
      cartIds: [], //选中ids
      checkboxAll: false, //全选按钮
      total: 0.0, //总价
      goSettlement: false, //去结算按钮
      cartId: '',
      cartNum: '',
      isLoad: false,
      cartNums: 0,
      editStatus: false
    }
  },
  components: { uniNumberBox },
  //页面加载
  onShow: function() {
    let userToken = this.$db.get('userToken')
    if (userToken) {
      this.getCartData(); //获取购物车数据
    }
  },
  computed: {
    // 从vuex中获取店铺名称
    shopName() {
      return this.$store.state.config.shop_name
    },
    goods_stocks_warn() {
      return this.$store.state.config.goods_stocks_warn
    }
  },
  methods: {
    checkboxChange: function(e) {
      let _this = this
      let id = e
      let cartData = _this.cartData
      for (let key in cartData.list) {
        if (cartData.list[key].id == id) {
          if (cartData.list[key].is_select == true) {
            cartData.list[key].is_select = false
          } else {
            cartData.list[key].is_select = true
          }
        }
      }
      _this.cartData = cartData
      _this.setNumsData()
      _this.isAllCheckbox()
    },

    //数组转字符串
    arrayToStr: function(array) {
      return array.toString()
    },

    //获取购物车数据
    getCartData: function() {
      let _this = this
      let cartIds = _this.arrayToStr(_this.cartIds)
      let data = {
        ids: cartIds,
        display: 'all'
      }
      this.$api.cartList(data, function(res) {
        if (res.status) {
          let data = res.data
          _this.showHandle(data) //数量设置
        }
      })
    },

    //渲染前配置数据
    showHandle: function(data, flag = true) {
      let _this = this
      let goSettlement = false
      for (let i in data.list) {
        //不可能购买0件
        if (data.list[i].nums < 1) {
          data.list[i].nums = 1
        }
        //不能买大于库存的数量(库存不足)
        let stockNo = false
        let maxStock = data.list[i].products.stock
        if (data.list[i].nums > data.list[i].products.stock) {
          //data.list[i].nums = data.list[i].products.stock;
          stockNo = true
          maxStock = data.list[i].nums
        }
        data.list[i].maxStock = maxStock
        data.list[i].stockNo = stockNo

        //库存紧张
        let stockTension = false
        if (_this.goods_stocks_warn >= data.list[i].products.stock) {
          stockTension = true
        }
        data.list[i].stockTension = stockTension

        //设置样式
        data.list[i].minStatus = 'normal'
        data.list[i].maxStatus = 'normal'
        if (data.list[i].nums == 1) {
          data.list[i].minStatus = 'disabled'
        }
        if (data.list[i].nums == data.list[i].products.stock) {
          data.list[i].maxStatus = 'disabled'
        }

        //设置规格参数
        data.list[i].spes = []
        if (data.list[i].products.spes_desc != null) {
          let spesArray = data.list[i].products.spes_desc.split(',')
          for (let key in spesArray) {
            let spesOne = spesArray[key].split(':')
            data.list[i].spes.push(spesOne[1])
          }
        }
        //添加左滑效果
        data.list[i].isTouchMove = false
        //是否可以去支付
        if (data.list[i].is_select) {
          goSettlement = true
        }
        //id转换为字符串
        data.list[i].id = _this.arrayToStr(data.list[i].id)

        //选中状态
        if (flag) {
          if (data.list[i].is_select) {
            if (_this.cartIds.indexOf(data.list[i].id) < 0) {
              _this.cartIds.push(data.list[i].id)
            }
          }
        }
      }

      data.goods_pmt = _this.$common.formatMoney(data.goods_pmt, 2, '')
      data.order_pmt = _this.$common.formatMoney(data.order_pmt, 2, '')
      data.amount = _this.$common.formatMoney(data.amount, 2, '')
      let isLoad = false
      if (data.list.length < 1) {
        isLoad = true
      }
      let n = 0
      for (let i in data.promotion_list) {
        n++
      }

      _this.goSettlement = goSettlement
      _this.isLoad = isLoad
      _this.cartNums = n

      if (flag) {
        _this.cartData = data
      } else {
        _this.getCartData()
      }

      _this.isAllCheckbox()
    },

    //是否全选
    isAllCheckbox: function() {
      let _this = this
      let cartData = _this.cartData.list
      let goSettlement = false
      let flag = true
      for (let key in cartData) {
        if (
          cartData[key].is_select == false &&
          cartData[key].stockNo == false
        ) {
          flag = false
        }
        if (cartData[key].is_select == true) {
          goSettlement = true
        }
      }
      if (cartData.length <= 0) {
        flag = false
      }

      _this.checkboxAll = flag
      _this.goSettlement = goSettlement
    },

    //全选操作
    checkboxAllButton: function(e) {
      if (this.checkboxAll == true) {
        this.checkboxAll = false
        this.setAllCheckbox(false)
      } else {
        this.checkboxAll = true
        this.setAllCheckbox(true)
      }
    },

    //全选设置
    setAllCheckbox: function(e) {
      let _this = this
      let cartData = _this.cartData
      if (e) {
        //全选
        for (let key in cartData.list) {
          if (cartData.list[key].stockNo == false) {
            cartData.list[key].is_select = true
          }
        }
      } else {
        //全不选
        for (let key in cartData.list) {
          cartData.list[key].is_select = false
        }
      }

      _this.cartData = cartData
      _this.setNumsData()
      _this.isAllCheckbox()
    },

    //设置刷新数据
    setNumsData: function() {
      let _this = this
      let cartData = _this.cartData
      let cartIds = []
      for (let key in cartData.list) {
        if (cartData.list[key].is_select) {
          cartIds.push(cartData.list[key].id)
        } else {
          // 					if (cartData.list[key].products.promotion_list) {
          // 						for (let k in cartData.list[key].products.promotion_list) {
          // 							cartData.list[key].products.promotion_list[k].type = 1;
          // 						}
          // 					}
        }
      }
      _this.cartIds = cartIds
      _this.cartData = cartData
      if (cartIds.length == 0) {
        let cartData = _this.cartData
        for (let k in cartData.promotion_list) {
          cartData.promotion_list[k].type = 1
        }
        cartData.goods_pmt = '0.00'
        cartData.order_pmt = '0.00'
        cartData.amount = '0.00'
        _this.cartData = cartData
      } else {
        _this.getCartData()
      }
    },

    //购物车数量调整
    bindChange(value, e) {
      let _this = this
      let id = e.id
      let num = value
      let cartData = _this.cartData
      let changeSelected = false
      for (let key in cartData.list) {
        if (cartData.list[key].id == id) {
          if (num <= cartData.list[key].products.stock) {
            cartData.list[key].nums = num
            changeSelected = true
          }
        }
      }
      if (changeSelected) {
        _this.cartData = cartData
        _this.cartId = id
        _this.cartNum = num
        _this.$common.throttle(_this.bindCartNumberOperation, _this, 350)
      } else {
        //_this.$common.errorToShow('数量错误1');
      }
      return false
    },

    //数量减一操作
    bindCartNumberOperation: function() {
      let _this = this
      _this.setCartNum(_this.cartId, _this.cartNum)
    },

    //设置购物车数量
    setCartNum: function(id, nums) {
      let _this = this
      let data = {
        id: id,
        nums: nums
      }
      _this.$api.setCartNum(data, function(res) {
        if (_this.cartIds.indexOf(id) > -1) {
          //_this.getCartData();
          if (res.status) {
            _this.$nextTick(function() {
              _this.showHandle(res.data, false)
            })
          } else {
            _this.$common.errorToShow(res.msg)
          }
        } else {
          _this.$nextTick(function() {
            _this.showHandle(res.data, false)
          })
        }
      })
    },

    //删除事件
    del: function(index, id) {
      let _this = this
      let cartid = id //cart_id
      //移除渲染
      _this.cartData.list.splice(index, 1)
      _this.cartData = _this.cartData
      _this.isLoad = true

      //移除数据库
      let data = {
        ids: cartid
      }
      _this.$api.removeCart(data, function(res) {
        if (res.status) {
          _this.$common.successToShow(res.msg)
        }
        _this.setNumsData()
        _this.isAllCheckbox()
      })
    },

    //收藏
    collection: function(e) {
      let _this = this
      app.db.userToken(function(token) {
        let data = {
          goods_id: e.currentTarget.dataset.goodsid
        }
        app.api.goodsCollection(data, function(res) {
          for (let k in _this.cartData.list) {
            if (
              _this.cartData.list[k].products.goods_id ==
              e.currentTarget.dataset.goodsid
            ) {
              if (res.msg == '收藏成功') {
                _this.cartData.list[k].isCollection = true
              } else {
                _this.cartData.list[k].isCollection = false
              }
            }
          }
          wx.showToast({
            title: res.msg,
			complete: function () {
				setTimeout(function() {
					uni.hideToast();
				},1000);
			}
          })
        })
      })
    },

    //去结算
    settlement: function(e) {
      let _this = this
      if (_this.goSettlement) {
        let cartData = _this.cartData.list
        let newData = ''
        for (let key in cartData) {
          if (cartData[key].is_select == true) {
            newData += ',' + cartData[key].id
          }
        }
        if (newData.substr(0, 1) == ',') {
          newData = newData.substr(1)
        }
        if (newData.length > 0) {
          _this.$common.navigateTo(
            '/pages/goods/place-order/index?cart_ids=' + JSON.stringify(newData)
          )
          return true
        } else {
          //没有选择不跳转
        }
      }
    },

    //手指触摸动作开始 记录起点X坐标
    touchstart: function(e) {
      //开始触摸时 重置所有删除
      let _this = this
      _this.cartData.list.forEach(function(v, i) {
        if (v.isTouchMove)
          //只操作为true的
          v.isTouchMove = false
      })
      _this.setData({
        startX: e.changedTouches[0].clientX,
        startY: e.changedTouches[0].clientY,
        cartData: _this.cartData
      })
    },

    //滑动事件处理
    touchmove: function(e) {
      let _this = this
      let index = e.currentTarget.dataset.index //当前索引
      let startX = _this.startX //开始X坐标
      let startY = _this.startY //开始Y坐标
      let touchMoveX = e.changedTouches[0].clientX //滑动变化坐标
      let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标
      let angle = _this.angle(
        { X: startX, Y: startY },
        { X: touchMoveX, Y: touchMoveY }
      ) //获取滑动角度
      _this.cartData.list.forEach(function(v, i) {
        v.isTouchMove = false
        //滑动超过30度角 return
        if (Math.abs(angle) > 30) return
        if (i == index) {
          if (touchMoveX > startX)
            //右滑
            v.isTouchMove = false
          else
            //左滑
            v.isTouchMove = true
        }
      })
      //更新数据
      _this.setData({
        cartData: _this.cartData
      })
    },

    //计算滑动角度
    angle: function(start, end) {
      let _X = end.X - start.X,
        _Y = end.Y - start.Y
      //返回角度 /Math.atan()返回数字的反正切值
      return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
    },
    //点击编辑
    editBtn: function() {
      this.editStatus = true
    },
    //点击完成
    editNoBtn: function() {
      let _this = this
      this.editStatus = false
      let is_select = false
      for (let i in _this.cartData.list) {
        if (_this.cartData.list[i].is_select) {
          is_select = true
          break
        }
      }
      if (is_select) {
        _this.getCartData()
      }
    },

    delList: function() {
      let _this = this
      let ids = []
      for (let k in _this.cartData.list) {
        if (_this.cartData.list[k].is_select) {
          ids += _this.cartData.list[k].id + ','
        }
      }
      let data = {
        ids: ids
      }
      _this.$api.removeCart(data, function(res) {
        if (res.status) {
          _this.$common.successToShow(res.msg)
        }
        _this.setNumsData()
        _this.isAllCheckbox()
      })
    }
  }
}
</script>
<style>
.cell-item-hd {
  max-width: 40upx;
  min-width: 40upx;
}
.margin-cell-group {
  margin: 0 0 2upx 0;
}
.little-right .goods-salesvolume {
  float: none;
}
.cart-bottom {
  /*  #ifdef  H5  */
  bottom: 50px;
  /*  #endif  */
  /*  #ifndef  H5  */
  bottom: 0;
  /*  #endif  */
  z-index: 99;
  height: 90upx;
  width: 100%;
  background-color: #fff;
  position: fixed;

  overflow: hidden;
  box-shadow: 0 0 20upx #ccc;
}
.cart-bottom-right {
  height: 90upx;
  float: right;
  overflow: hidden;
}
.cart-bottom-right-t {
  display: inline-block;
  height: 100%;
  line-height: 90upx;
  margin-right: 20upx;
  font-size: 28upx;
  color: #666;
}
.cart-bottom-right-t .red-price {
  float: none;
}
.btn-square {
  float: right;
}
.cart-bottom .cart-checkbox-c {
  color: #333;
  font-size: 30upx;
}
.cart-none {
  text-align: center;
  padding: 200upx 0;
}
.cart-none-img {
  width: 252upx;
  height: 228upx;
  margin-bottom: 40upx;
}
.cart-none-t {
  color: #666;
  font-size: 28upx;
}
.cart-none-m {
  color: #666;
  font-size: 28upx;
  margin-bottom: 40upx;
}
.cart-none-b {
  /* border: 2upx solid #ccc; */
  display: inline-block;
  padding: 16upx 40upx;
  font-size: 30upx;
  color: #666;
  background-color: #e3e3e3;
}
.stockError {
  font-size: 12px;
  color: #ffffff;
  background-color: #ff7159;
  padding: 1px 3px;
  border-radius: 3px;
}
.stockTension {
  background-color: #ffc107;
}
/* #ifdef MP-ALIPAY */
label {
  display: block;
}
/* #endif */
.click-del{
	overflow: hidden;
	height: 52upx;
}
.click-del .icon{
	float: right;
}
</style>
